<template>
  <div class="app">
    <div class="box_logo">
      <div class="logo_mid_img">
        <router-link to="/">
          <img src="../assets/images/logo/xiaobaishop_0.png" />
        </router-link>
      </div>
    </div>
    <div class="box_backgroud">
      <!-- 登录 -->
      <el-form ref="form" :model="login_data">
        <div class="box">
          <div class="box_body">
            <!-- 标题 -->
            <div class="box_title box_public">
              <h4>账号登录</h4>
            </div>
            <!-- 账户名 -->
            <div class="box_username box_public">
              <div class="box_icon">
                <svg
                  t="1651928149711"
                  class="icon_p"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="8883"
                  width="32"
                  height="32"
                >
                  <path
                    d="M626.568192 981.999616l-23.379968 0-36.857856 0.283648L68.137984 982.283264l0-23.989248c0 0-10.815488-134.006784 186.535936-168.308736 0 0 150.230016-20.28032 160.748544-61.595648 0 0 5.732352-4.596736 1.502208-52.578304-9.017344-102.161408-75.86816-150.234112-102.909952-189.293568-27.041792-39.063552-29.293568-84.13184-29.293568-84.13184 0-11.264 4.716544-15.391744 12.560384-22.626304 9.696256-8.950784 6.786048-18.4576 4.934656-28.52864-7.04512-38.23616-7.666688-99.662848-0.970752-138.138624 1.502208-45.820928 43.56608-82.625536 43.56608-82.625536 7.892992-6.695936 15.803392-14.062592 21.343232-22.898688 1.547264-2.460672 2.970624-5.09952 3.8144-7.897088 3.16928-10.548224-7.560192-18.292736-5.407744-29.51168 1.942528-10.116096 19.280896-10.61376 29.766656-11.164672 23.614464-1.243136 47.347712-2.172928 70.925312-0.366592C641.71008 72.155136 699.725824 137.1136 699.725824 137.1136c13.73696 16.449536 22.787072 36.566016 28.23168 57.184256 1.630208 6.16448 3.028992 12.45696 3.785728 18.79552 5.501952 31.602688 5.481472 64.559104 3.770368 96.494592-0.815104 15.22688-2.584576 30.215168-4.819968 45.282304-1.17248 7.8848-0.571392 15.222784 4.70016 21.523456 4.4032 5.271552 9.44128 8.95488 11.60192 15.881216 1.011712 3.238912 1.275904 6.736896 1.275904 10.112 0 0-2.255872 45.068288-29.297664 84.13184-27.041792 39.059456-93.893632 87.13216-102.905856 189.293568-4.23424 47.981568 1.502208 52.578304 1.502208 52.578304 10.514432 41.314304 160.748544 61.595648 160.748544 61.595648 199.55712 37.010432 186.53184 168.308736 186.53184 168.308736l0 23.989248-131.3792 0 20.70016-0.283648L836.49536 982.00064l-36.64384 0L626.568192 982.00064 626.568192 981.999616z"
                    p-id="8884"
                    fill="#ff0036"
                  ></path>
                </svg>
              </div>
              <div class="box_input">
                <el-input
                  v-model="login_data.userName"
                  placeholder="请输入用户名"
                ></el-input>
              </div>
            </div>

            <!-- 密码 -->
            <div class="box_username box_public">
              <div class="box_icon">
                <svg
                  t="1651928068381"
                  class="icon_p"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4415"
                  width="32"
                  height="32"
                >
                  <path
                    d="M796.444444 446.008889H343.608889v-125.155556c0-86.471111 70.542222-157.013333 157.013333-157.013333 86.471111 0 157.013333 70.542222 157.013334 157.013333 0 25.031111 20.48 45.511111 45.511111 45.511111s45.511111-20.48 45.511111-45.511111c0-136.533333-111.502222-248.035556-248.035556-248.035555S252.586667 184.32 252.586667 320.853333v125.155556H204.8c-25.031111 0-45.511111 20.48-45.511111 45.511111v420.977778c0 25.031111 20.48 45.511111 45.511111 45.511111h591.644444c25.031111 0 45.511111-20.48 45.511112-45.511111V491.52c0-25.031111-20.48-45.511111-45.511112-45.511111zM537.031111 737.28c-2.275556 0-4.551111 2.275556-4.551111 4.551111V785.066667c0 43.235556-13.653333 50.062222-31.857778 50.062222s-31.857778-4.551111-31.857778-50.062222v-36.408889-9.102222c0-2.275556-2.275556-4.551111-4.551111-4.551112-13.653333-9.102222-22.755556-25.031111-22.755555-45.511111 0-31.857778 27.306667-59.164444 59.164444-59.164444s59.164444 25.031111 59.164445 59.164444c2.275556 20.48-9.102222 36.408889-22.755556 47.786667z"
                    fill="#ff0036"
                    p-id="4416"
                  ></path>
                </svg>
              </div>
              <div class="box_input">
                <el-input
                  v-model="login_data.password"
                  placeholder="请输入密码"
                  show-password
                ></el-input>
              </div>
            </div>

            <!-- 登录按钮 -->
            <div class="login_butto box_public">
              <el-button class="button_el" @click="user_login">登录</el-button>
            </div>

            <!-- 跳转注册 -->
            <div class="to_regist box_public">
              <router-link to="/regist">免费注册</router-link>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <bottomv />
  </div>
</template>

<script>
import bottomv from "@/components/bottom.vue";

export default {
  components: { bottomv },
  data() {
    return {
      login_data: {
        userName: "",
        password: "",
      },
    };
  },
  methods: {
    async user_login() {
      const res = await this.$http.post(
        this.$url + "login/user",
        this.login_data
      );
      console.log(res);
    },
  },
};
</script>

<style scoped>
.box_logo {
  margin-left: 16%;
}

.box_backgroud {
  width: auto;
  height: 600px;
  background-image: url("../assets/images/login/xiaobaishop_login.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0px 0px;
}

.to_regist {
  font-size: 12px;
}

.icon_p {
  float: left;
  width: 30px;
  margin: 6px auto;
  height: auto;
}

.box_input {
  float: right;
  width: 90%;
}

.button_el {
  color: white;
  width: 100%;
  height: auto;
  font: 1em sans-serif;
  background-color: #ff0036;
}

.to_regist {
  float: right;
  color: #6c6c6c;
}

.box_public {
  /* background-color: blue; */
  width: 100%;
  height: 40px;
  margin: 16px 0px 12px 0px;
}

.box_body {
  margin: 0 auto;
  height: 80%;
  width: 330px;
  /* background-color: white; */
}

.box {
  background-color: white;
  float: right;
  text-align: center;
  margin: 6% 22%;
  width: 360px;
  height: 400px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 12%), 0 0 6px rgb(0 0 0 / 4%);
}
</style>
